import Taro from "@tarojs/taro";
import React, { useEffect, useRef, useState } from "react";
// import left from "../image/left.png";
import { View, Image, Button } from "@tarojs/components";
import { AtForm, AtInput, AtImagePicker, AtMessage } from "taro-ui";
import Enroll from "../../../components/enroll/enroll";
import "./register.scss";
import NavBar from "../fit";

const Register = () => {
  const [name, setname] = useState(undefined);
  const [identify, setidentify] = useState(undefined);
  const [tel, settel] = useState(undefined);
  const [img, setimg] = useState(undefined);
  const [Url, setUrl] = useState([]);
  //用于后续Taro.previewImage中资格证明得阅览
  let newUrl = Array.from(Url.map(item => item.url));
  // const [content, setContent] = useState([{}])
  const data = useRef({});

  const openId = Taro.getStorageSync("openid");

  // 用于身份证和电话号码长度的检验
  const Inspection = (type, vl) => {
    Taro.atMessage({
      message: vl,
      type: type,
      duration: 1000
    });
  };
  const handleChange1 = name => {
    setname(name);
  };
  const handleChange2 = identify => {
    // console.log(typeof identify[0])
    // for (var i = 0; i < 15; i++) {
    //   if (Number(identify[i])) {
    //     Inspection('warning', "请输入数字")
    //     return
    //   }
    // }
    // const length = () => {
    //   if (identify.length != 16) {
    //     Inspection('warning', "您输入的身份证位数有误")
    //     return
    //   }
    //   else {
    setidentify(identify);
    // }
    // }
    // 循环事件,4秒后触发查看位数事件
    // setTimeout(length, 3000)
  };
  const handleChange3 = tel => {
    // if (tel.length < 11) {
    //   Inspection('warning', "您输入的电话位数有误")
    //   return
    // } else {
    settel(tel);
    // }
  };
  // 返回到个人中心
  const Submit = () => {
    // console.log("url:",Url[0].url)
    if (Url[0] === undefined) {
      Taro.showToast({
        title: "请提交证件照片",
        icon: "error",
        duration: 2000
      });
      return;
    }else if(name===undefined||identify===undefined||tel===undefined){
      Taro.showToast({
        title: "基本信息请补全",
        icon: "error",
        duration: 2000
      });
      return;
    }
    let newContent = [
      {
        enroll_name: name,
        enroll_idCard: identify,
        enroll_phone: tel,
        qualification: Url[0].url,
        openid: openId
      }
    ];
    data.current = newContent;
    console.log("dietitian:", data.current[0]);
    // 清空输入框的内容
    setname(undefined);
    settel(undefined);
    setidentify(undefined);
    setUrl([]);
    settel(undefined);
  };
  //点击图片阅览
  const Multi_select = item => {
    console.log(item);
    Taro.previewImage({
      current: item[0],
      urls: item
    });
  };

  return (
    <View className="box">
      <NavBar
        title="营养师填写信息"
        // color="#ffffff"
        back={true}
        home={true}
      />

      <View className="boxbox">
        <View className="box1">
          <AtForm onSubmit={Submit} className="form">
            <View className="up ">请填写您的各项信息</View>
            <AtInput
              name="name"
              title="姓名"
              type="text"
              placeholder="请输入真实姓名"
              value={name}
              onChange={name => {
                handleChange1(name);
              }}
            />
            <AtInput
              maxlength={16}
              name="identify"
              title="身份证号"
              // border={false}
              type="text"
              placeholder="请输入身份证号"
              value={identify}
              onChange={identify => {
                handleChange2(identify);
              }}
            />
            <AtInput
              name="tel"
              title="电话号码"
              // border={false}
              type="text"
              placeholder="请输入电话号码"
              maxlength={11}
              value={tel}
              onChange={tel => {
                handleChange3(tel);
              }}
            />

            <View className="zp">上传您的营养师证照片</View>
            <View>
              {/* 图片 */}
              <AtImagePicker
                mode="aspectFit"
                // multiple={true}
                length={3}
                files={Url}
                onChange={value => setUrl(value)}
                onImageClick={() => Multi_select(newUrl)}
              />
            </View>
            {/* //导入点击组件，以及云函数的操作 */}
            <Enroll props={data} />
          </AtForm>
        </View>
      </View>
    </View>
  );
};
export default Register;
